<template>
    <view>
        <scroll-view class="grace-tab-title grace-center" scroll-x="true" id="grace-tab-title">
            <view v-for="(tab, index) in tabs" :key="index" :class="[tabCurrentIndex == index ? 'grace-tab-current' : '']" :id="'tabTag-'+index" @tap="tabChange">{{tab.name}}</view>
        </scroll-view>
        <swiper class="grace-tab-swiper-full" :current="swiperCurrentIndex" @change="swiperChange" :style="{height:tabHeight+'px'}">
            <!-- 循环新闻项目 -->
            <swiper-item v-for="(news, newsIndex) in newsAll" :key="newsIndex">
				
                <scroll-view scroll-y="true" :data-scindex="newsIndex" @scrolltolower="scrollend">
                    <view class="grace-news-list" style="padding:25upx; width:700upx;">
                      <navigator v-for="(item, indexs) in news" :key="indexs">
					   <view v-for="(item2,index2) in item.userWaterbillSheet" :key="index2">		
					    <view class="yongquan">
                   <view class="zuo"> 
					<view class="zuowarp">
						<image class="shuzi" :src="'../../static/images/' +item.userWaterbillValue +'.png'"></image>
						<image class="money" src="../../static/images/qian.png"></image>
						<view class="jine">无金额门槛</view>
					</view>
				</view>
				<view class="you">
					<view class="youwarp">
						<view class="shuipiao">{{item.userWaterbillValue}}元水票</view>
						<button class="liji">立即使用</button>
					</view>
				</view>
				<view class="xia">
					<view class="xiawarp">
						<view class="goumai">仅限小程序购买使用</view>
						<i class="iconfont jiantou">&#xe602;</i>
					</view>
				</view>
			</view>
		 </view>
						</navigator>
                    </view>
                    <graceLoading :loadingType="tabs[newsIndex].loadingType"></graceLoading>
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>
</template>
<script>
var _self;
//默认新闻数据（来自api请求）

import graceLoading from "../../graceUI/components/graceLoading.vue"
export default {
    data() {
        return {
            tabCurrentIndex: 0,
            swiperCurrentIndex: 0,
            tabHeight : 300,
            tabs: [
                //标签名称 , 分类 id , 加载更多, 加载的页码
                { name: '已使用', id: 'aleralyused' , loadingType : 0, page : 1},
                { name: '未使用', id: 'notuserd', loadingType: 0, page: 1}
          ],
            newsAll: [
				[],
				[]
			],
			fail:""
        }
    },
    onLoad:function(){
        _self = this;
		//已使用
		uni.request({
			url: 'https://www.zunyishengshui.com/maishui/WaterBill/selectNoUseWaterBill', //仅为示例，并非真实接口地址。
			method:'POST',
			data: {
				userId: '12321312312313'
			},
			header:{
				'content-type': 'application/x-www-form-urlencoded', 
			},
			success: (res) => {
				console.log(res);
				this.$set(this.newsAll,1,res.data.data)
				
				console.log(this.newsAll)
				this.success = res.data.data;
				for ( var i = 0;i<this.newsAll[1].length;i++){
					this.newsAll[1][i].userWaterbillSheet = parseInt(this.newsAll[1][i].userWaterbillSheet)
				}
				this.text = 'request success';
			},
			fail:(err)=>{
				console.log(err)
			}
		});
		//未使用
		uni.request({
			url: 'https://www.zunyishengshui.com/maishui/WaterBill/selectNoUseWaterBill', //仅为示例，并非真实接口地址。
			method:'POST',
			data: {
				userId: '12321312312313'
			},
			header:{
				'content-type': 'application/x-www-form-urlencoded', 
			},
			success: (res) => {
				console.log(res);
				this.$set(this.newsAll,0,res.data.data)
				
				this.success = res.data.data;
				for ( var i = 0;i<this.newsAll[0].length;i++){
					this.newsAll[0][i].userWaterbillValue = parseInt(this.newsAll[0][i].userWaterbillValue)
				}
				this.text = 'request success';
			}
		})
		
		
		
		
		
		
    },
    onReady: function () {
        //获取屏幕高度及比例
        var winInfo = uni.getSystemInfo({
            success: function (res) {
                var windowHeight = res.windowHeight;
                //获取头部标题高度
                var dom = uni.createSelectorQuery().select('#grace-tab-title')
                dom.fields({size: true}, res2 => {
                    if(!res2){return ;}
                    //计算得出滚动区域的高度
                    _self.tabHeight = windowHeight - res2.height;
                }).exec();
            }
        });
    },
    methods:{
        tabChange: function (e) {
            var index = e.target.id.replace('tabTag-', '');
            this.swiperCurrentIndex = index;
            this.tabCurrentIndex    = index;
        },
        swiperChange: function(e){
            var index = e.detail.current;
            this.tabCurrentIndex = index;
        },
        //每个选项滚动到底部
        scrollend:function(e){
            //获取是哪个选项滚动到底？
            var index = e.currentTarget.dataset.scindex;
            console.log(index);
            //可以利用 tabs 携带的分类id 与服务器交互请求对应分类的数据
            console.log(this.tabs[index].id);
            //加载更多的演示
            //判断当前是否正在加载
            if (this.tabs[index].loadingType === 1){
                return false;
            }
            //判断是否是最后一页
            console.log(this.tabs[index].page)
            if (this.tabs[index].page > 3){
                this.tabs[index].loadingType = 2;//全部
                return ;
            }
            this.tabs[index].loadingType = 1;//加载中
            //模拟延迟
            setTimeout(function(){
                _self.newsAll[index] = _self.newsAll[index].concat(news);
                //分页
                _self.tabs[index].page++;
                _self.tabs[index].loadingType = 0;//恢复加载状态
                //
            }, 1000);
        }
    },
	moutend(){
		console.log(21212)
		
	},
    components:{
        graceLoading
    }
}
</script>
<style>
	
	.yongquan {
		width: 92%;
		height: 242upx;
		border-radius: 6px;
		background: #d7eaf7;
		margin: 24upx 20px 20px 20px;
	}

	.zuo {
		float: left;
		width: 218upx;
		height: 176upx;
		border-right: 1upx dashed #e0cdd3;
		border-bottom: 2upx dashed #e0cdd3;
	}

	.you {
		float: right;
		width: 420upx;
		height: 175upx;
		border-bottom: 2upx dashed #e0cdd3;
	}

	.zuowarp {
		position: relative;
	}

	.shuzi {
		width: 96upx;
		height: 70upx;
		position: absolute;
		top: 28upx;
		left: 68upx;
	}

	.money {
		width: 28upx;
		height: 26upx;
		position: absolute;
		top: 72upx;
		left: 54upx;
	}

	.jine {
		font-size: 12px;
		color: #444444;
		position: absolute;
		top: 104upx;
		left: 56upx;
	}

	.youwarp {
		position: relative;
	}

	.shuipiao {
		font-size: 12px;
		color: #444444;
		position: absolute;
		top: 44upx;
		left: 12upx;
	}

	.liji {
		width: 154upx;
		height: 56upx;
		border-radius: 34upx;
		background: #3B9CDB;
		color: #FFFFFF;
		font-size: 12px;
		position: abs olute;
		top: 92upx;
		right: -90upx;
	}

	.xiawarp {
		position: relative;
	}

	.goumai {
		font-size: 12px;
		color: #444444;
		position: absolute;
		left: 44upx;
		top: 204upx;
	}

	.jiantou {
		position: absolute;
		top: 192upx;
		right: 22upx;
	} 
	.grace-loading text{
		opacity: 0;
	}
	
	
	
	
	
	




</style>